<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-16 16:36:58
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-08-05 09:12:46
 * @Description  : 
-->
<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-04 11:34:07
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-04 15:01:06
 * @Description  : 
-->
<template>
	<uv-popup
		ref="cartInner"
		round="15"
		zIndex="999999"
		mode="bottom"
		custom-style="height: 50vh;">
		<template #default>
			<view class="cart-popup">
				<view class="top">
					<view class="title">已加购商品</view>
					<view @tap="handleCartClear" class="clear">
						<uv-icon name="trash" color="#5a5b5c" size="16"></uv-icon>
						清空
					</view>
				</view>
				<view class="cart-list" scroll-y>
					<view class="wrapper">
						<view class="item" v-for="(item, index) in cart" :key="index">
                            <view class="leftImage">
                                <image :src="item.image"></image>
                            </view>
							<view class="left">
								<view class="name">{{ item.name }}</view>
								<view class="props">{{ item.valueStr }}</view>
                                <view class="priceClass">
                                    ￥<text>{{ item.price }}</text>
                                </view>
							</view>
							
							<view class="right">
								<button
									type="default"
									plain
									size="mini"
									class="btn"
									hover-class="none"
									@tap="handleCartItemReduce(index)">
									<view class="iconfont iconsami-select"></view>
								</button>
								<view class="number">{{ item.number }}</view>
								<button
									type="primary"
									class="btn btn-add"
									size="min"
									hover-class="none"
									@tap="handleCartItemAdd(index)">
									<view class="iconfont iconadd-select"></view>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</uv-popup>
</template>

<script setup>
	import { ref, reactive, watch } from 'vue'
	import { useMixin } from '@/utils/mixins';
	const { checkStockIsEnough } = useMixin();  // 使用 composable
	const popupRef = ref(null)
	const props = defineProps({
		cart: Array,
	})
    const cartInner = ref()
	const emit = defineEmits([
		'handleCartItemReduce',
		'handleCartItemAdd',
        'handleCartClear'
	])
	const open = () => {
		console.log('打开商品详情模态框')

		cartInner.value.open()
	}
	const close = () => {
		cartInner.value.close() // 关闭弹窗逻辑
	}
	

	const handleCartItemReduce = (index) => {
		if (props.cart[index].number === 1) {
			props.cart.splice(index, 1)
		} else {
			props.cart[index].number -= 1
		}
		if (!props.cart.length) {
			close()
		}
		uni.setStorageSync('cart', JSON.parse(JSON.stringify(props.cart)))
		// sendTestMessage()
	}
	const handleCartItemAdd = async (index) => {
		let clickGood = props.cart[index]
		if (!await checkStockIsEnough(clickGood, 1,props.cart)) {
			return
		}
		props.cart[index].number += 1
		uni.setStorageSync('cart', JSON.parse(JSON.stringify(props.cart)))
		// sendTestMessage()
	}
    const handleCartClear = () => {
		uni.showModal({
			title: '提示',
			content: '确定清空购物车么',
			success: ({ confirm }) => {
				if (confirm) {
					props.cart.length = 0;  // 清空数组
					uni.setStorageSync('cart', JSON.parse(JSON.stringify(props.cart)))
					close()
					// sendTestMessage()
				}
			},
		})
	}
	// 暴露方法
	defineExpose({
		open,
		close,
	})
</script>

<style scoped lang="scss">
	.cart-popup {
		display: flex;
		flex-direction: column;
		height: 100%;
		z-index: 99999;
		.top {
			display: flex;
			justify-content: space-between;
			// background-color: $bg-color-primary;
			//color: $primary-bgc-color;
			color: #5a5b5c;
			padding: 30rpx 20rpx;
			font-size: 24rpx;
            align-items: center;
			.title {
				font-size: 32rpx;
			}
			.clear {
				display: flex;
                align-items: center;
			}
		}
		.cart-list {
			flex: 1;
			background-color: #ffffff;
			width: 100%;
			overflow: hidden;
			.wrapper {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 20rpx 30rpx;
				overflow: auto;
				&::-webkit-scrollbar{
					display: none;
				}
				.item {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					position: relative;
					&::after {
						content: ' ';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: $border-color;
						height: 2rpx;
						transform: scaleY(0.6);
					}
                    .leftImage{
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                        margin-right: 10rpx;
                        image{
                            width: 100%;
                            height: 100%;
                        }
                    }
					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						margin-right: 30rpx;
						.name {
							font-size: 28rpx;
							color: #000;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap
						}
						.props {
							color: $text-color-assist;
							margin-top: 6rpx;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
                        .priceClass{
                            margin-top: auto;
                            color: red;
                            font-size: 22rpx;
                            text{
                                font-size: 30rpx;
                            }
                        }
					}

					

					.right {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn {
							width: 46rpx;
							height: 46rpx;
							border-radius: 100%;
							padding: 0;
							text-align: center;
							line-height: 46rpx;
						}

						.number {
							font-size: $font-size-base;
							width: 46rpx;
							height: 46rpx;
							text-align: center;
							line-height: 46rpx;
						}
                        .btn-add{
                            background-color: $qingzhen-btn-primary-color;
                        }
					}
				}
			}
		}
	}
</style>
